<template>
	<div class="index_view">
		<!-- 轮播图 -->
		<div class="swiper-container">
			<a-carousel
				class="swiper"
				:auto-play="true"
				indicator-type="dot"
				show-arrow="hover"
			>
				<a-carousel-item v-for="image in images" :key="image">
					<a-image width="100%" showLoader :src="image" />
				</a-carousel-item>
			</a-carousel>
		</div>
		<!-- 左右两栏不等高布局 -->
		<a-layout class="movies">
			<!-- 主体内容区 -->
			<a-layout-content>
				<movie-region
					:movieItem="recommendMovie"
					:loading="recommendMovieLoding"
					tagTitle="全部"
				></movie-region>
				<movie-region
					v-for="tag in tagMovieList"
					:key="tag"
					:tagTitle="tag.tagTitle"
					:movieItem="tag.movieItem"
					:loading="tag.loading"
				></movie-region>
			</a-layout-content>
			<!-- 排行榜 -->
			<a-layout-sider class="movie_rank" :width="300">
				<rank-List
					v-if="ranklist.length > 1"
					:rankList="ranklist"
					:itemTitle="movieName"
					:detailsUrl="/movieDetails/"
				>
					<template #title>
						<h2 class="rank_title">热门电影</h2>
					</template>
				</rank-List>
			</a-layout-sider>
		</a-layout>
	</div>
</template>

<script setup>
import indexApi from '../../api/index'
import movieApi from '../../api/movie'
// 轮播图
const images = [
	'http://43.138.224.168:3000/static/upload/a2.jpg',
	'http://43.138.224.168:3000/static/upload/a2.jpg',
	'http://43.138.224.168:3000/static/upload/a2.jpg'
]
const ranklist = ref([])
const recommendMovie = ref(Array(6).fill({}))
const recommendMovieLoding = ref(true)
const tagList = ['动作', '剧情', '喜剧', '动画']
const tagMovieList = ref([])
const movieName = ref('movieName')
// 获取排行榜信息
indexApi.showRank().then(res => {
	ranklist.value = res
})
// 获取推荐电影信息
movieApi.getRecommend().then(res => {
	recommendMovie.value = res
	recommendMovieLoding.value = false
})
// 循环获取对应tag的电影列表
tagList.forEach((x, index) => {
	tagMovieList.value.push({
		tagTitle: x,
		movieItem: Array(6).fill({}),
		loading: true
	})
	movieApi.getTagMovie(x).then(res => {
		// 切割 只需要6个展示即可
		if (res.length > 6) {
			res = res.splice(0, 6)
		}
		tagMovieList.value[index].movieItem = res
		tagMovieList.value[index].loading = false
	})
})
</script>

<style lang="scss" scoped>
.index_view {
	height: 100%;
}

.swiper-container {
	min-width: 1450px;
	max-width: 1450px;
	margin: 0 auto;

	.swiper {
		width: 100%;
		height: 300px;
	}
}

// 电影类型区域
.movies {
	display: flex;
	gap: var(--normal-distance);
	width: 1450px;
	margin: 0 auto;
}

// 排行榜
.movie_rank {
	height: 550px;
	margin-top: var(--normal-distance);
	background-color: var(--main-2-bg);
	.rank_title {
		color: brown;
		margin-left: var(--normal-distance);
	}
}
</style>
